body{
    margin : 0;
    padding : 0;
    box-sizing : border-box;
    font-family: 'Poppins';
    display: flex;
    justify-content: center;
    background-color: #000; 
    min-height: 100vh;  
}

.container{
    position: relative;
    display: relative;
    justify-content: center;
    align-items: center;
   
}

.box{
    position: relative;
    width : 300px;
    height :400px;
    top:10%;
    color:#fff;
    justify-content: center;
    align-items: center;
    -webkit-box-reflect: below,15px linear-gradient(transparent,transparent,rgba(0,0,0,.2));
}

.box:hover{
    color : #000;
}
.box:before{
    content : " ";
    position: absolute;
    top : 0 ;
    left:0;
    width:100%;
    height:100%;
    border:4px solid #fff;
    background: #000;
    filter : url(#wavy);
}

.box:hover:before{
    background: #fff;
    transition: 0.5s;

}

.box:after{
    content : " ";
    position: absolute;
    top : 0 ;
    left:0;
    width:50%;
    height:100%;
    border:4px solid #fff;
    border-right:none;
    background: rgba(255,255,255,.1);
    filter : url(#wavy);
}


.content{
    position: absolute;
    padding: 20px;
    text-align: center;
    transition: 0.5s;
}
svg{
    width:0;
    height:0;
}